<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../data-jelly-fish/css/layui.css">
    <link rel="stylesheet" href="https://www.layui.com/admin/pro/dist/style/admin.css?v=1.4.0%20pro-1">
</head>
<body >
<div id="LAY_app" class="layadmin-tabspage-none">
    <div class="layadmin-tabsbody-item layui-show">
        <div class="layui-card layadmin-header">
            <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                <a lay-href="">主页</a>
            </div>
        </div>

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            空间占用
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">当前</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="storageSize">加载中...</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            总记录数
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">当前</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="recordSize">加载中...</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            成功数量
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">当前</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="successfulSize">加载中...</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            待处理数量
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">当前</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="waitSize">加载中...</p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            Topic任务数
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">运行中</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="topicRuningTaskSize">加载中...</p>
                            <p>
                                总任务数
                                <span class="layuiadmin-span-color"><span id="topicTaskSize">加载中...</span> <i class="layui-icon"></i></span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            消费者任务数
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">运行中</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="consumerRuningTaskSize">加载中...</p>
                            <p>
                                总任务
                                <span class="layuiadmin-span-color"><span id="consumerTaskSize">加载中...</span> <i class="layui-icon"></i></span>
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<script src="../data-jelly-fish/layui.js"></script>
<script>
    //JavaScript代码区域
    var $;
    layui.use('element', function(){
        var element = layui.element;
        $ = layui.jquery;

        init()
    });

    function init(){
        $.getJSON("../stats",function (data){
            if (data.code != "0"){
                return;
            }
            data = data.data;
            $("#storageSize").text(data.storageSize);
            $("#recordSize").text(data.recordSize);
            $("#successfulSize").text(data.successfulSize);
            $("#failedSize").text(data.failedSize);
            $("#waitSize").text(data.waitSize);
            $("#consumerTaskSize").text(data.consumerTaskSize);
            $("#consumerRuningTaskSize").text(data.consumerRuningTaskSize);
            $("#topicTaskSize").text(data.topicTaskSize);
            $("#topicRuningTaskSize").text(data.topicRuningTaskSize);
        });
    }
</script>
<style type="text/css">

    .layui-col-md4{
        background-color: gray;
        height: 90px;
        vertical-align: middle;
        line-height: 90px;
        text-align: center;
    }
</style>
</body>
</html>
